<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram of a Moving Electron</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Style and Geometry Definitions ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5; // Thicker lines to match the original drawing style
        ctx.font = '24px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        const cx = 220;
        const cy = 180;
        const radiusA = 80;
        const angleTheta = -Math.PI / 4.5; // Angle in radians (~-40 degrees), negative for downward direction in canvas
        const rLength = 140;

        // --- Drawing Elements ---

        // 1. Draw the circle representing the electron shell
        ctx.beginPath();
        ctx.arc(cx, cy, radiusA, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the z-axis
        ctx.beginPath();
        drawArrow(ctx, cx, cy, cx + 200, cy);
        ctx.stroke();

        // 3. Draw the position vector r
        const rEndX = cx + rLength * Math.cos(angleTheta);
        const rEndY = cy + rLength * Math.sin(angleTheta);
        ctx.beginPath();
        drawArrow(ctx, cx, cy, rEndX, rEndY);
        ctx.stroke();

        // 4. Draw the radius 'a'
        const aAngle = 2.1; // ~120 degrees in radians
        const aEndX = cx + radiusA * Math.cos(aAngle);
        const aEndY = cy - radiusA * Math.sin(aAngle); // Use -sin for standard math angle convention
        ctx.beginPath();
        ctx.moveTo(cx, cy);
        ctx.lineTo(aEndX, aEndY);
        ctx.stroke();

        // 5. Draw the angle arc for θ
        const arcRadius = 40;
        ctx.beginPath();
        ctx.arc(cx, cy, arcRadius, 0, angleTheta, true); // true for counter-clockwise
        ctx.stroke();

        // 6. Draw the velocity vector
        const v_arrow_y = cy + 40;
        const v_arrow_start_x = cx + radiusA - 20;
        const v_arrow_end_x = cx + radiusA - 70;
        ctx.beginPath();
        drawArrow(ctx, v_arrow_start_x, v_arrow_y, v_arrow_end_x, v_arrow_y);
        ctx.stroke();

        // --- Labels ---
        
        // Label 'e' at the center
        ctx.fillText('e', cx, cy + 5);

        // Label 'a' on its radius
        ctx.fillText('a', cx + (radiusA * 0.6) * Math.cos(aAngle) - 5, cy - (radiusA * 0.6) * Math.sin(aAngle) - 5);

        // Label 'z' for the axis
        ctx.fillText('z', cx + 215, cy);

        // Label 'r' for the position vector
        ctx.fillText('r', rEndX + 15 * Math.cos(angleTheta), rEndY + 15 * Math.sin(angleTheta) - 5);

        // Label 'θ' for the angle
        ctx.fillText('θ', cx + (arcRadius + 20) * Math.cos(angleTheta / 2), cy + (arcRadius + 20) * Math.sin(angleTheta / 2));

        // Label 'v << c'
        ctx.textAlign = 'left';
        ctx.font = 'italic 24px serif';
        ctx.fillText('v', v_arrow_start_x + 10, v_arrow_y);
        ctx.font = 'bold 24px serif';
        ctx.fillText('<<', v_arrow_start_x + 25, v_arrow_y);
        ctx.font = 'italic 24px serif';
        ctx.fillText('c', v_arrow_start_x + 60, v_arrow_y);

        // Figure caption
        ctx.font = 'bold 24px serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 2.83', cx, cy + radiusA + 60);

        // The comma-like mark from the original image
        ctx.font = '24px serif';
        ctx.fillText(',', cx - 80, cy + radiusA + 60);

    </script>
</body>
</html>